/* 带仪表盘的版本页面 */
<template>
  <dv-full-screen-container>
    <!-- 头部  左 右-->

    <Header class="header">111</Header>

    <!-- 主体 左 中 右 -->
    <div class="container">
      <!-- 左 -->
      <div class="left">
        <div class="top">
          <dv-border-box-8 class="sideTop" :color="['#4e5e81']">
            <div class="title">111</div>
            <div class="textCenter" id="Gauge"></div>
          </dv-border-box-8>
        </div>
        <div class="middle">
          <dv-border-box-8 class="sideCenter" :color="['#4e5e81']">
            <div class="title">222</div>
            <div class="textCenter" id="Gauge"></div>
          </dv-border-box-8>
        </div>
        <div class="bottom">
          <dv-border-box-8 class="sideRight" :color="['#4e5e81']">
            <div class="title">333</div>
            <div class="textCenter" id="Gauge"></div>
          </dv-border-box-8>
        </div>
      </div>
      <!-- 中 -->
      <div class="center">222</div>
      <!-- 右 -->
      <div class="right">333</div>
    </div>
  </dv-full-screen-container>
</template>
<script>
import "../assets/about.css";
export default {
  data() {
    return {};
  },
  // 页面初始化挂载dom
  mounted() {
    // this.getLoadEcharts();
    setTimeout(() => {
      this.drawMyChart();
    }, 10);
  },
  methods: {
    // 仪盘表
    // drawMyChart() {
    //   var myChart = this.$echarts.init(document.getElementById("Gauge"));
    //   console.log(myChart);
    //   // 绘制图表
    //   myChart.setOption({
    //     tooltip: {
    //       formatter: "{a} <br/>{b} : {c}%",
    //     },
    //     toolbox: {
    //       show: false,
    //       feature: {
    //         restore: {},
    //         saveAsImage: {},
    //       },
    //     },
    //     // 配置
    //     series: [
    //       {
    //         name: "CPU使用率",
    //         type: "gauge",
    //         axisLabel: {
    //           distance: -40,
    //           fontWeight: 100,
    //           color: "#fff",
    //           shadowOffsetY: 100,
    //           height: 100,
    //         },
    //         axisLine: {
    //           lineStyle: {
    //             width: 10, // 修改仪表盘宽度的属性
    //           },
    //         },
    //         splitLine: {
    //           //分隔线样式相关
    //           length: 15, //分割线的长度
    //           lineStyle: {
    //             width: 1,
    //             color: "#b0b3b8",
    //           },
    //         },
    //         title: { offsetCenter: [0, "85%"], color: "red" },
    //         detail: {
    //           formatter: "{value}%",
    //           offsetCenter: [0, "65%"],
    //           fontStyle: "oblique",
    //           fontSize: 12,
    //         },
    //         pointer: { width: 4 },
    //         data: [{ value: 13.33, name: "CPU使用率" }],
    //       },
    //     ],
    //   });
    // },
    // getLoadEcharts() {
    //   var myChart = this.$echarts.init(document.getElementById("Gauge"));
    //   var colorList = ["#4FE894", "#EF0C27", "#FEE7EA"];
    //   var listData = [
    //     { name: "不明", value: 20 },
    //     { name: "已判明", value: 20 },
    //     { name: "未发现", value: 20 },
    //   ];
    //   var option = {
    //     color: colorList,
    //     title: {
    //       x: "center",
    //       y: "center",
    //       textStyle: {
    //         color: "#000",
    //         fontSize: 20,
    //       },
    //     },
    //     legend: {
    //       orient: "vertical",
    //       bottom: 5,
    //       align: "right",
    //       right: 15,
    //       textStyle: {
    //         color: "#000",
    //         fontSize: 20,
    //       },
    //       selectedMode: false,
    //       data: ["元素1", "元素2", "元素3"],
    //     },
    //     tooltip: {
    //       trigger: "item",
    //     },
    //     series: [
    //       {
    //         type: "pie",
    //         center: ["50%", "50%"],
    //         radius: ["55%", "35%"],
    //         itemStyle: {
    //           normal: {
    //             color: function (params) {
    //               return colorList[params.dataIndex];
    //             },
    //           },
    //         },
    //         label: {
    //           show: true,
    //           fontSize: 10,
    //           color: "#000",
    //           formatter: function (data) {
    //             return data.name + ":" + data.percent.toFixed(0) + "%";
    //           },
    //         },
    //         labelLine: {
    //           normal: {
    //             length: 15,
    //             length2: 15,
    //             lineStyle: {
    //               width: 2,
    //             },
    //           },
    //         },
    //         data: listData,
    //       },
    //     ],
    //   };
    //   myChart.setOption(option);
    // },
  },
};
</script>
<style scoped></style>
